<template>
<view>
	<u-navbar :is-back="false" title="付款记录详情"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>
	

	
  <CommDetail :cid="cid" :info="info" :current="2">
    <view class="cons whiteBg">
     

			   
      <view class="topBox whiteBg">
        <view class="info  x-row">
          <view class="x-col">
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      支付方式：</view>
			    {{detail.sPayType}}
			  </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      审核：</view>
			    {{detail.PassStatus}}
			  </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      状态：</view>
			    {{detail.sStatus}}
				<u-button  v-if="detail.fPassStatus==1 && detail.fStatus>0" style="margin:20rpx" size="mini" type="primary"
					  @click="showPay=true">红冲</u-button>
			  </view>
            <view class="itxt">
              <view class="s1 u-skeleton-fillet">
                支付金额：</view>
              {{detail.fPayMoney}} 元
            </view>
           <view class="itxt">
             <view class="s1 u-skeleton-fillet">
               抹零：</view>
             {{detail.fNoPay}} 元
           </view>
            <block>
               
              <view class="itxt">
                <view class="s1 u-skeleton-fillet">
                  支付时间：</view>
                {{detail.fPayTime}}
              </view>
			  <view class="itxt">
			    <view class="s1 u-skeleton-fillet">
			      填报人：</view>
			    {{detail.fUserName}}
			  </view>
            </block>
            <block>
              <view class="itxt"  @click="imgshow">
                <view class="s1 u-skeleton-fillet">
                  支付凭证：</view>
                <image :src="imgPic+detail.fPayPic" mode="" />
              </view>
              <view class="itxt">
                <view class="s1 u-skeleton-fillet">
                  支付说明：</view>
                {{detail.fPayInfo}}
              </view>
			  <view class="itxt"  v-if="detail.fStatus==-2">
			    <view class="s1 u-skeleton-fillet">
			      红冲：</view>
			    {{detail.fLog}}
			  </view>
            </block>
          </view>
        </view>
      <view  v-if="detail.fPayType==4">
      <u-table>
    	   <u-tr>
    	     <u-th>名称</u-th>
    	     <u-th>数量</u-th>
    	     <u-th>单价</u-th>
    	     <u-th>金额</u-th>
    	   </u-tr>
    	   <u-tr v-for="(g,index) in paylist" :key="index">
    	     <u-td>
    	       {{g.fProName}}
    	     </u-td>
    	     <u-td>
    	       {{g.fCount}}
    	     </u-td>
    	 <u-td>
    	   {{g.fPrice}}
    	 </u-td>
    	 <u-td>
    	   {{g.fMoney}}
    	 </u-td>
    	   </u-tr>
    	 </u-table>
	
      </view>

    </view>
</view>
  </CommDetail>
  
  <view
    :style="{height:height}">
  </view>
  <u-modal v-model="showPay"
    @confirm="confirmPay"
    :title-style="{color: '#191F25'}"
    title="付款信息红冲" width="70%"
    :show-cancel-button="true"
    confirm-text="确定"
    cancel-text="取消"
    cancel-color="#3296FA"
    confirm-color="#3296FA">
  
     
     <view class="details">
   
       <view class="detaItem">
         <view class="title">
           请输入理由：</view>
         <u-input type="textarea" border value="" placeholder="请输入内容" v-model="Hongform.Info" />
       </view>
     </view>
     
     
  </u-modal>
  <u-skeleton
    :loading="loading"
    :animation="true"
    bgColor="#FFF">
  </u-skeleton>
  
</view>	</template>

<script>
import CommDetail from './commdetail'
export default {
  components: { CommDetail },
  data() {
    return {
       cid: 0,
	   payid: 0,
	   WillId:0,
       info: {},
       detail: {},
	   paylist: [],
	   Hongform: {
	     WillId: 0,
	     Info: ''
	   },
	   height: this.but_height(),
	  showPay: false,
      imgPic: this.urlimg 
    }
  },
  onLoad(e) {
    this.cid = Number(e.id)
	  this.payid = Number(e.payid)
    this.$axios('api/MrkBasic/GetDetail', 'post', {
      value: e.id
    }).then(res => {
      this.info = res.Value
      this.loading = false
      return res.Value
    })
	
    this.$axios('api/PayInfo/GetDetailNameById', 'post', { value: e.payid }).then(res => {
      this.detail = res.Value
	  this.WillId=this.detail.fWillId
    })
	 
	 this.$axios('api/OrderPayBackPro/GetSmallList', 'post', { value: e.payid }).then(res => {
	    this.paylist = res.Value
	 })
  }
  ,
  methods: {
    
    imgshow() {
      let arr = [this.urlimg + this.detail.fPayPic]
      uni.previewImage({
        urls: arr,
        current: arr[0]
      })
    } ,
	confirmPay() {
	  let that = this
	  if (!this.Hongform.Info) {
	    uni.showToast({
	      title: '请输入理由',
	      icon: 'none'
	    })
	    return
	  }
	    this.Hongform.WillId=this.payid
	    this.$axios('api/PayInfo/UpdateHongChong', 'post', { value: this.Hongform }).then(res => {
	    if (!res.Success) {
	      uni.showToast({
	        title: '提交失败：' + res.Message,
	        icon: 'none',
	        duration: 2000
	      })
	     
	      return false
	    }
	  			 
	  				//	uni.showToast({
	  					//  title: '提交成功',
	  					//  icon: 'none',
	  					//  duration: 2000
	  				//	})
	  					
	  					// this.$axios('api/MrkNoPayWill/GetDetail', 'post', { value: this.willid }).then(res => {
	  					//   this.detail = res.Value
	  					// })
				      this.$api.handleToUrl('提交成功', '/pages/my_customer/PayWillDetail?id='+this.cid +'&willid='+this.WillId)
	   
	    
	          })
	}
	
  }
}
</script>

<style lang="scss" scoped>
page {
  padding: 0 20rpx;
}
.goodBox {
  padding-left: 24rpx;
  box-sizing: border-box;
  .gtit {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    padding: 18rpx 8rpx;
  }
  .glist {
    padding: 32rpx 32rpx 32rpx 0;
    box-sizing: border-box;
    .gimg {
      width: 144rpx;
      height: 144rpx;
      margin-right: 24rpx;
    }
    .gname {
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      line-height: 30rpx;
      height: 80rpx;
    }
    .num {
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
      line-height: 24rpx;
    }
    .price {
      font-size: 32rpx;
      font-weight: bold;
      color: #000000;
      line-height: 40rpx;
      text {
        font-size: 24rpx;
      }
    }
  }
}
.totalrow {
  margin: 20rpx 0;
  padding: 40rpx 0;
  text-align: center;
  .tname {
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 44rpx;
  }
  .tnum {
    font-size: 48rpx;
    font-weight: 500;
    color: #111111;
    line-height: 64rpx;
  }
}
.topBox {
  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;

      .s1 {
        width: 160rpx;
        color: #979797;
        font-size: 32rpx;
        display: inline-block;
      }

      .yhj {
        width: 96rpx;
        height: 40rpx;
        text-align: center;
        border-radius: 20rpx;
        display: inline-block;
        line-height: 40rpx;
        border: 2rpx solid #2b88fe;
        font-size: 28rpx;
        color: #2b88fe;
        margin-left: 16rpx;
      }

      .mingxi {
        font-weight: 400;
        color: #2b88fe;
        line-height: 42rpx;

        .iconfont {
          font-size: 25rpx;
        }

        display: inline-block;
        margin-left: 16rpx;
      }
    }
  }
  image {
    width: 100rpx;
    height: 100rpx;
  }
  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 96rpx;
      height: 96rpx;
      margin-right: 16rpx;
      background-color: #f2f2f2;
    }

    .sname {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .khmc {
      padding-top: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }

    .iconyou {
      color: #999999;
    }
  }
}
</style>